<template>
	<view class="vk-mall-share-qrcode">
		<u-popup
			:value="value"
			mode="center"
			width="640"
			height="930"
			border-radius="0"
			duration="0"
			@input="onInput"
		>
			<view v-if="value">
				<view :class="show ? 'show' : 'hide'">
					<canvas
						:canvas-id="canvasID"
						:style="{ width: canvasW + 'px', height: canvasH + 'px' }"
					></canvas>
				</view>
				<view v-if="!loading">
					<image :src="shareImage" mode="scaleToFill" class="share-image"></image>
					<!-- #ifdef H5 -->
					<view class="button-box">
						<u-button type="default" class="button-item">长按图片保存</u-button>
					</view>
					<!-- #endif -->
					<!-- #ifndef H5 -->
					<view class="button-box">
						<u-button type="default" class="button-item" @click="saveImageToPhotosAlbum">
							保存到相册
						</u-button>
						<!-- #ifdef MP -->
						<u-button type="success" class="button-item share-button" open-type="share">
							分享给好友
						</u-button>
						<!-- #endif -->
					</view>
					<!-- #endif -->
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	name: "vk-mall-share-qrcode",
	props: {
		show: {
			Type: Boolean,
			default: true
		},
		value: {
			Type: Boolean,
			default: false
		},
		banner: {
			Type: String
		},
		qrcode: {
			Type: String
		},
		avatar: {
			Type: String,
			default: ""
		},
		canvasID: {
			//canvasID 等同于 canvas-id
			Type: String,
			default: "PosterCanvas"
		},
		title: {
			//文本内容
			Type: String,
			default: ""
		},
		titleColor: {
			//标题颜色
			Type: String,
			default: "#333333"
		},
		lineType: {
			//标题显示行数		（注超出2行显示会导致画布布局絮乱）
			Type: [String, Boolean],
			default: true
		},
		originalColor: {
			//默认颜色（如原价与扫描二维码颜色）
			Type: String,
			default: "#b8b8b8"
		},
		width: {
			//画布宽度  (高度根据图片比例计算 单位upx)
			Type: String,
			default: 750
		},
		canvasBg: {
			//canvas画布背景色
			Type: String,
			default: "#ffffff"
		},
		viewDetails: {
			//描述提示文字
			Type: String,
			default: "长按或扫描识别二维码"
		},
		priceTxt: {
			//价格值
			Type: String,
			default: "99.99"
		},
		priceColor: {
			//价格颜色
			Type: String,
			default: "#e31d1a"
		},
		originalTxt: {
			//原价值
			Type: String,
			default: "199.99"
		},
		qrcodeId: {
			// 二维码id
			Type: String,
			default: "myShareCode"
		}
	},
	data() {
		return {
			canvasW: 0,
			canvasH: 0,
			canvasImgSrc: "",
			ctx: null,
			shareImage: "",
			loading: false
		};
	},
	mounted() {},
	methods: {
		onInput(value) {
			let that = this;
			that.$emit("input", value);
		},
		open() {
			let that = this;
			that.init();
		},
		close() {
			let that = this;
			that.shareImage = "";
		},
		async init() {
			let that = this;
			let vk = that.vk;
			that.loading = true;
			vk.showLoading("绘制中...");
			that.ctx = uni.createCanvasContext(that.canvasID, this);
			let bili = 1;
			that.canvasW = 800 * bili;
			that.canvasH = 1000 * bili;
			that.ctx.setFillStyle(that.canvasBg); //canvas背景颜色
			that.ctx.fillRect(0, 0, that.canvasW, that.canvasH); //canvas画布大小

			let { avatar, qrcode } = that;
			//添加二维码
			that.ctx.drawImage(qrcode, 100 * bili, 50 * bili, 600 * bili, 600 * bili);
			//添加二维码 end

			// 画头像
			if (avatar) {
				let _avatarInfo = await that.getImageInfo(avatar); //头像
				that.ctx.drawImage(_avatarInfo.path, 335 * bili, 700 * bili, 140 * bili, 140 * bili);
			}

			that.ctx.setFontSize(40 * bili); //设置标题字体大小
			that.ctx.setFillStyle(that.titleColor); //设置标题文本颜色
			that.ctx.textAlign = "center";
			that.ctx.fillText(that.title, 400 * bili, 950 * bili);
			//延迟后渲染至canvas上
			setTimeout(() => {
				that.ctx.draw(true, res => {
					that.canvasToTempFilePath();
					that.loading = false;
					vk.hideLoading();
				});
			}, 600);
		},
		// 获取可用于画布的图片信息
		async getImageInfo(src) {
			let that = this;
			let { qrcodeId = "myShareCode" } = that;
			let promise = new Promise((resolve, reject) => {
				if (!src) {
					console.log("src不能为空");
					reject();
				}
				if (src.indexOf("base64,") == -1) {
					uni.getImageInfo({
						src: src,
						success(image) {
							resolve(image);
						},
						fail(err) {
							console.error("getImageInfo-err", err, "src", src);
							reject(err);
						}
					});
				}
			});
			promise.catch(err => {
				vk.hideLoading();
			});
			return promise;
		},
		// 画布转临时图片
		canvasToTempFilePath() {
			let that = this;
			uni.canvasToTempFilePath(
				{
					canvasId: that.canvasID,
					quality: 1,
					success: res => {
						that.shareImage = res.tempFilePath;
						that.$emit("success", res);
						that.$emit("update:shareImage", res.tempFilePath);
					}
				},
				that
			);
		},
		// 保存到手机相册
		saveImageToPhotosAlbum() {
			let that = this;
			let vk = that.vk;
			uni.saveImageToPhotosAlbum({
				filePath: that.shareImage,
				success: res => {
					vk.toast("已保存到相册", "none");
				}
			});
		}
	},
	// 监听器
	watch: {
		value: {
			handler: function(newVal, oldValue) {
				let that = this;
				if (newVal) {
					that.open();
				} else {
					that.close();
				}
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.vk-mall-share-qrcode {
	.hide {
		position: absolute;
		top: -100000px;
		width: 0;
		height: 0;
	}
	.image-loading {
		width: 140rpx;
		height: 140rpx;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	.button-box {
		display: flex;
		justify-content: center;
	}
	.button-item {
		width: 260rpx;
	}
	.share-button {
		margin-left: 40rpx;
	}
	.share-image {
		width: 640rpx;
		height: 792rpx;
	}
}
</style>
